<script setup lang="ts">
	const cardLoading = ref(false)
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		list: {
			type: Array,
			default: null
		}
	})
	const bgColor = (index) => {
		switch (index) {
			case 0:
				return 'no1'
			case 1:
				return 'no2'
			case 2:
				return 'no3'
		}
	}
</script>

<template>
	<a-card :bordered="false" :loading="cardLoading">
		<h4>{{ props.title }}</h4>
		<a-divider />
		<div class="flex items-center mt-8" v-for="(item, index) in props.list">
			<div v-if="index === 0 || index === 1 || index === 2">
				<div :class="['parallelogram', bgColor(index), 'text-white', 'text-[18px]']">{{ index + 1 }}</div>
			</div>
			<div v-else class="parallelogram text-[#999] text-[16px]">{{ index + 1 }}</div>
			<div class="ml-5 mr-8">{{ item.name }}</div>
			<a-progress
				:percent="item.percent"
				:format="(percent) => `${percent}`"
				:stroke-color="{
					'0%': '#108ee9',
					'100%': '#87d068'
				}"
				class="flex-1"
			/>
			<div class="ml-8">{{ item.money }}</div>
		</div>
	</a-card>
</template>

<style scoped lang="less">
	.parallelogram {
		width: 24px;
		height: 24px;
		text-align: center;
		line-height: 24px;
	}

	.other {
		width: 24px;
		height: 24px;
		color: #999;
	}

	.no1 {
		background: linear-gradient(#faaf99, #f57a56);
		transform: skewX(-15deg);
		box-shadow: -5px 5px 5px rgb(243, 206, 197);
	}

	.no2 {
		background: linear-gradient(#d3cbc9, #9fa4bb);
		transform: skewX(-15deg);
		box-shadow: -5px 5px 5px rgb(208, 215, 246);
	}

	.no3 {
		background: linear-gradient(#fdd9cf, #e8c7a6);
		transform: skewX(-15deg);
		box-shadow: -5px 5px 5px rgb(243, 227, 211);
	}

	:deep(.ant-progress-line) {
		margin-bottom: 0;
	}

	:deep(.ant-divider-horizontal) {
		margin-top: 10px;
	}
</style>
